import React from 'react';
import { useColorStore, useRecommendationStore, useUserStore } from '@/stores';
import { useQuickActions } from '@/stores/hooks';
import { Button } from '@/components/ui/Button';
import { ColorUtils } from '@/utils/color';

export const Dashboard: React.FC = () => {
  const { user } = useUserStore();
  const { currentColor, selectedColors, recentSchemes } = useColorStore();
  const { recommendationHistory } = useRecommendationStore();
  const { quickGenerateComplementary, quickGenerateAnalogous, quickGenerateRandom } = useQuickActions();

  const stats = {
    totalSchemes: recentSchemes.length,
    totalRecommendations: recommendationHistory.length,
    favoriteColors: selectedColors.slice(0, 5),
    recentActivity: recentSchemes.slice(0, 3)
  };

  return (
    <div className="space-y-8">
      {/* 欢迎区域 */}
      <div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg shadow-lg p-6 text-white">
        <h1 className="text-3xl font-bold mb-2">
          欢迎{user ? `，${user.username}` : '使用色彩搭配应用'}
        </h1>
        <p className="text-blue-100 mb-4">
          发现完美的色彩搭配，释放你的创意潜能
        </p>
        <div className="flex flex-wrap gap-3">
          <Button
            variant="outline"
            className="bg-white/10 border-white/30 text-white hover:bg-white/20"
            onClick={quickGenerateRandom}
          >
            🎲 随机调色板
          </Button>
          <Button
            variant="outline"
            className="bg-white/10 border-white/30 text-white hover:bg-white/20"
            onClick={quickGenerateComplementary}
          >
            🎨 生成互补色
          </Button>
        </div>
      </div>

      {/* 统计卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div className="bg-white rounded-lg shadow-md p-6">
          <div className="flex items-center">
            <div className="p-3 rounded-full bg-blue-100 text-blue-600">
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4z" />
              </svg>
            </div>
            <div className="ml-4">
              <p className="text-sm font-medium text-gray-500">色彩方案</p>
              <p className="text-2xl font-bold text-gray-900">{stats.totalSchemes}</p>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-md p-6">
          <div className="flex items-center">
            <div className="p-3 rounded-full bg-green-100 text-green-600">
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364-.707l-.707.707M21 12h-1M17.5 19.5l-.707-.707M12 21v-1m-6.364.707l.707-.707M3 12h1M6.5 4.5l.707.707" />
              </svg>
            </div>
            <div className="ml-4">
              <p className="text-sm font-medium text-gray-500">推荐记录</p>
              <p className="text-2xl font-bold text-gray-900">{stats.totalRecommendations}</p>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-md p-6">
          <div className="flex items-center">
            <div className="p-3 rounded-full bg-purple-100 text-purple-600">
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
            </div>
            <div className="ml-4">
              <p className="text-sm font-medium text-gray-500">收藏颜色</p>
              <p className="text-2xl font-bold text-gray-900">{stats.favoriteColors.length}</p>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-md p-6">
          <div className="flex items-center">
            <div className="p-3 rounded-full bg-orange-100 text-orange-600">
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <div className="ml-4">
              <p className="text-sm font-medium text-gray-500">当前颜色</p>
              <div className="flex items-center mt-1">
                <div
                  className="w-6 h-6 rounded border border-gray-300 mr-2"
                  style={{ backgroundColor: currentColor.hex }}
                />
                <span className="text-sm font-mono text-gray-700">{currentColor.hex}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {/* 当前调色板 */}
        <div className="bg-white rounded-lg shadow-md p-6">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">当前调色板</h2>
          {selectedColors.length > 0 ? (
            <div className="space-y-3">
              <div className="flex flex-wrap gap-2">
                {selectedColors.map((color, index) => (
                  <div
                    key={index}
                    className="flex items-center space-x-2 bg-gray-50 rounded-lg p-2"
                  >
                    <div
                      className="w-8 h-8 rounded border border-gray-300"
                      style={{ backgroundColor: color.hex }}
                    />
                    <div className="text-sm">
                      <p className="font-mono text-gray-700">{color.hex}</p>
                      <p className="text-gray-500">{color.name || '未命名'}</p>
                    </div>
                  </div>
                ))}
              </div>
              <div className="flex space-x-2">
                <Button size="sm" onClick={() => window.location.href = '/color-picker'}>
                  编辑调色板
                </Button>
                <Button variant="outline" size="sm" onClick={quickGenerateAnalogous}>
                  生成类似色
                </Button>
              </div>
            </div>
          ) : (
            <div className="text-center py-8">
              <div className="text-gray-400 mb-2">
                <svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4z" />
                </svg>
              </div>
              <p className="text-gray-500 mb-4">暂无选中的颜色</p>
              <Button onClick={() => window.location.href = '/color-picker'}>
                开始选择颜色
              </Button>
            </div>
          )}
        </div>

        {/* 最近的方案 */}
        <div className="bg-white rounded-lg shadow-md p-6">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">最近的方案</h2>
          {stats.recentActivity.length > 0 ? (
            <div className="space-y-4">
              {stats.recentActivity.map((scheme) => (
                <div key={scheme.id} className="border border-gray-200 rounded-lg p-4">
                  <div className="flex items-center justify-between mb-2">
                    <h3 className="font-medium text-gray-900">{scheme.name}</h3>
                    <span className="text-xs text-gray-500">
                      {new Date(scheme.createdAt).toLocaleDateString()}
                    </span>
                  </div>
                  <div className="flex space-x-1 mb-2">
                    {scheme.colors.slice(0, 5).map((color, index) => (
                      <div
                        key={index}
                        className="w-6 h-6 rounded border border-gray-300"
                        style={{ backgroundColor: color.hex }}
                        title={color.hex}
                      />
                    ))}
                    {scheme.colors.length > 5 && (
                      <div className="w-6 h-6 rounded border border-gray-300 bg-gray-100 flex items-center justify-center">
                        <span className="text-xs text-gray-500">+{scheme.colors.length - 5}</span>
                      </div>
                    )}
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
                      {scheme.type}
                    </span>
                    <button className="text-sm text-blue-600 hover:text-blue-800">
                      查看详情
                    </button>
                  </div>
                </div>
              ))}
              <Button
                variant="outline"
                className="w-full"
                onClick={() => window.location.href = '/history'}
              >
                查看全部历史
              </Button>
            </div>
          ) : (
            <div className="text-center py-8">
              <div className="text-gray-400 mb-2">
                <svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <p className="text-gray-500">暂无历史记录</p>
            </div>
          )}
        </div>
      </div>

      {/* 快速入门 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h2 className="text-lg font-semibold text-gray-900 mb-4">快速入门</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="text-center p-4 bg-blue-50 rounded-lg">
            <div className="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-3">
              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4z" />
              </svg>
            </div>
            <h3 className="font-medium text-gray-900 mb-2">选择颜色</h3>
            <p className="text-sm text-gray-600 mb-3">使用色彩选择器挑选你喜欢的颜色</p>
            <Button size="sm" onClick={() => window.location.href = '/color-picker'}>
              开始选择
            </Button>
          </div>

          <div className="text-center p-4 bg-green-50 rounded-lg">
            <div className="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-3">
              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364-.707l-.707.707M21 12h-1M17.5 19.5l-.707-.707M12 21v-1m-6.364.707l.707-.707M3 12h1M6.5 4.5l.707.707" />
              </svg>
            </div>
            <h3 className="font-medium text-gray-900 mb-2">获取推荐</h3>
            <p className="text-sm text-gray-600 mb-3">基于色彩理论获得智能搭配建议</p>
            <Button size="sm" onClick={() => window.location.href = '/recommendations'}>
              查看推荐
            </Button>
          </div>

          <div className="text-center p-4 bg-purple-50 rounded-lg">
            <div className="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-3">
              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
              </svg>
            </div>
            <h3 className="font-medium text-gray-900 mb-2">分析数据</h3>
            <p className="text-sm text-gray-600 mb-3">查看你的色彩使用统计和趋势</p>
            <Button size="sm" onClick={() => window.location.href = '/analytics'}>
              查看分析
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};